<template>
	<div class="app">
		<h2>我是App组件</h2>
		<h3>
			当前number的值是：
			<span v-text="number"/>
		</h3>
		<h3>
			当前number的值放大10倍后是：
			<span v-big="number"/>
		</h3>
		<h3>
			当前str截取前3位后的值是：
			<span v-atguigu-slice="str"/>
		</h3>
		<Student />
	</div>
</template>
1
<script>
	import Student from "./components/Student";

	export default {
		name: "App",
		components: {Student},
		data() {
			return {
				number:666,
				str:'hello，atguigu'
			}
		},
		directives:{ //局部指令
			//big函数何时会被调用？ —— 当有人使用了v-big的时候
			big(element,{value}){
				console.log('%%%%',this)
				if(typeof(value) !== 'number'){
					throw new Error('你犯错了，给我的不是数字')
				}
				element.innerText = value * 10
				element.style.backgroundColor = 'yellow'
			},
		}
	};
</script>

<style>
	.app{
		background-color: gray;
		padding: 20px;
	}
</style>